<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite lay-href="/code/qr/list">码商二维码列表</cite></a>
        <a><cite>修改二维码</cite></a>
    </div>
</div>
<style>
    .layui-form-label {
        width:15% !important;
        margin-left:1%;
    }
    .layui-input-inline {
        width: 33% !important;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <form class="layui-form layui-form-pane">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本信息 <span style="color: red; font-size: 12px;"> *为必填项</span></li>
                </ul>
                <input type="hidden" name="id" id="id" />
                <input type="hidden" name="codePath" id="codePath" />
                <div class="layui-tab-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收款用户ID</label>
                        <div class="layui-input-inline">
                            <input type="text" id="userId" disabled="disabled" class="layui-input">
                        </div>
                        <label class="layui-form-label">收款用户</label>
                        <div class="layui-input-inline">
                            <input type="text" id="username" disabled="disabled" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>二维码标识</label>
                        <div class="layui-input-inline">
                            <input type="text" id="collName" name="collName" lay-verify="required" placeholder="请输入二维码标识" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span style="color: red;">* </span>实名认证姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="collThirdName" name="collThirdName" lay-verify="required" placeholder="请输入支付宝实名认证姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>二维码类型</label>
                        <div class="layui-input-inline">
                            <select name="codeType" id="codeType" required lay-search="">
                                <option value="1">支付宝</option>
                                <option value="2">微信</option>
                                <option value="3">聚合码</option>
                            </select>
                        </div>
                        <label class="layui-form-label"><span style="color: red;">* </span>二维码状态</label>
                        <div class="layui-input-inline">
                            <select name="status" id="status" required lay-search="">
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                                <option value="-1">待审核</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>最小收款金额(元)</label>
                        <div class="layui-input-inline">
                            <input type="text" id="minAmount" name="minAmount" lay-verify="required|number" placeholder="请输入单笔最小收款金额" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span style="color: red;">* </span>最大收款金额(元)</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="maxAmount" name="maxAmount" ley-verify="required|number" placeholder="请输入单笔最大收款金额" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>每天收款次数</label>
                        <div class="layui-input-inline">
                            <input type="text" id="dayMaxNum" name="dayMaxNum" lay-verify="required|number" placeholder="请输入每天允许收款次数" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span style="color: red;">* </span>每天收款金额(元)</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="dayMaxAmount" name="dayMaxAmount" lay-verify="required|number" placeholder="每天允许收款金额,单位元" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>收款开始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="collStartTime" id="collStartTime" placeholder="交易开始时间,格式为:01:30:00"  autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label"><span style="color: red;">* </span>收款结束时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="collEndTime" id="collEndTime" placeholder="交易结束时间,格式为:23:30:00"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">* </span>三方账号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="collThirdAccount" name="collThirdAccount" lay-verify="required" placeholder="请输入三方账号，格式为：手机号码或邮箱" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">支付宝ID</label>
                        <div class="layui-input-inline">
                            <input type="tel" id="collThirdId" name="collThirdId" ley-verify="required|number" placeholder="点击下方按钮获取，2088开头的16位数字" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-block">
                            <input type="text" id="remark" name="remark" placeholder="请输入备注信息" autocomplete="off" style="width: 92%" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-inline" style="margin-left: 100px;">
                            <div class="layui-upload-drag" id="uploadImg">
                                <i class="layui-icon"></i>
                                <p>点击上传二维码，或将二维码拖拽到此处</p>
                                <div class="layui-hide" id="uploadDemoView">
                                    <hr>
                                    <img src="" id="codeImg" alt="上传成功后渲染" style="max-width: 196px">
                                </div>
                            </div>
                        </div>
                        <div class="layui-input-inline" style="margin-left: 200px;">
                            <a id="showPIC" class="layui-btn layui-btn-info layui-icon layui-icon-picture">获取支付宝ID</a>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="padding-bottom: 20px;">
                        <button type="button" class="layui-btn" lay-submit="" lay-filter="addBtn">保存</button>
                        <a class="layui-btn" lay-href="/code/qr/list">返回</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    layui.use(['admin', 'form', 'upload', 'laydate'],function(){
        var form = layui.form
            ,$ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            ,upload = layui.upload
            ,laydate = layui.laydate
            ,layer = layui.layer ;
        // 导航
        element.render('breadcrumb', 'breadcrumb');
        var id = layui.router().search.id;
        admin.req({
            type: 'get',
            url: layui.setter.baseUrl + '/code/qr/get',
            data: {
                id : id
            },
            error: function(err){
                layer.alert(JSON.stringify(err.field), {
                    title: '错误提示'
                })
            },
            success: function(res){
                if(res.code == 0){
                    $('#id').val(res.data.id);
                    var codePath = res.data.codePath;
                    codePath = codePath.substring(codePath.indexOf("qr")+3, codePath.length);
                    $('#codePath').val(codePath);
                    $('#collName').val(res.data.collName);
                    $('#codeType').val(res.data.codeType);
                    $('#status').val(res.data.status);
                    $('#collThirdAccount').val(res.data.collThirdAccount);
                    $('#collThirdId').val(res.data.collThirdId);
                    $('#minAmount').val(res.data.minAmount);
                    $('#maxAmount').val(res.data.maxAmount);
                    $('#dayMaxAmount').val(res.data.dayMaxAmount);
                    $('#dayMaxNum').val(res.data.dayMaxNum);
                    $('#collStartTime').val(res.data.collStartTime);
                    $('#collEndTime').val(res.data.collEndTime);
                    $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.codePath);
                    $('#remark').val(res.data.remark);
                    form.render();
                }
            }
        });

        //拖拽上传
        upload.render({
            elem: '#uploadImg'
            , size: 1024
            , url: layui.setter.baseUrl + '/code/qr/upload?access_token='+layui.data(layui.setter.tableName).access_token
            , done: function (res) {
                if (res.code == 0) {
                    layer.msg("二维码上传成功");
                    $('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.url);
                    $('#codePath').val(res.data.codePath);
                } else {
                    layer.alert(res.msg);
                }
            }
        });

        form.on('submit(addBtn)', function(data) {
            if(!$("#codePath")){
                layer.alert("请先上传二维码");
                return ;
            }
            //这里可以写ajax方法提交表单
            admin.req({
                type: "POST",
                url: layui.setter.baseUrl + '/code/qr/edit',
                data: data.field,
                success: function(res){
                    if(res.code == 0) {
                        layer.alert(res.msg, {title: "提示"}, function(index){
                            layer.close(index);
                            location.href = layui.setter.baseLocal + 'qr/list';
                        });
                    }
                }
            });
        });

        laydate.render({
            elem: '#collStartTime'
            ,type: 'time'
            ,format: 'HH:mm:ss'
        });

        laydate.render({
            elem: '#collEndTime'
            ,type: 'time'
            ,format: 'HH:mm:ss'
        });
        form.render();
    })
</script>